<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!--引入Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>天气案例_深度监视</title>
</head>

<body>
  <!--准备好一个容器-->
  <div id="root">
    <h2>今天天气很 {{info}}</h2>
    <button @click="changeWeather">切换天气</button>
    <hr>
    <h2>a的值是:{{numbers.a}}</h2>
    <button @click="numbers.a++">点我a++</button>
    <h2>b的值是:{{numbers.b}}</h2>
    <button @click="numbers.b++">点我b++</button>
    <br>
    <br>
    <button @click="numbers={a:111,b:000}">彻底替换numbers</button>
  </div>


  <script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
      el: '#root',
      data: {
        isHot: true,
        numbers:{
          a:1,
          b:1
        }
      },
      computed: {
        info() {
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot
        }
      },
      watch:{
        isHot:{
          //hander什么时候调用？当isHot发生改变时
          hander(newValue,oldValue){
          console.log('isHot被修改',newValue,oldValue)
          }
        },
        // //监视多级结构中某个属性的变化
        // 'numbers.a':{
        //   handler(){
        //     console.log('a被改变了')
        //   }
        // }
        //监视多级结构中所有属性的变化
        numbers:{
          deep:true,
          handler(){
            console.log('numbers改变了')
          }
        }
      }
    })
  </script>
</body>

</html>